<script setup>
import { ref, defineEmits } from 'vue'
import CustomAmount from '@/components/CustomAmount.vue'

const props = defineProps({
  cartList: {
    type: Array,
    required: true,
    default: () => []
  }
})

// 控制是否触发店铺的勾选状态变化函数
const controller = ref(true)

// 监听店铺的勾选状态变化
const handleShopCheckChange = (shopItem) => {
  // 如果店铺状态由勾选 ---> 不勾选，说明是取消勾选了商品导致的店铺勾选状态变化 不执行反选操作
  if (!controller.value) {
    controller.value = true
    return
  }
  shopItem.goodsList.forEach(goodsItem => {
    goodsItem.goodsIsChecked = shopItem.shopIsChecked
  })
}

// 监听商品的勾选状态变化
const handleGoodsCheckChange = (shopItem) => {
  const futureShopCheckStatus = shopItem.goodsList.every(goodsItem => goodsItem.goodsIsChecked)
  // 如果店铺状态由勾选 ---> 不勾选
  if (shopItem.shopIsChecked && !futureShopCheckStatus) {
    controller.value = false
  }
  shopItem.shopIsChecked = futureShopCheckStatus
}

// 点击删除时通知父组件
const deleteGoodsEmit = defineEmits(['handleDeleteGoods'])

</script>

<template>
  <view v-for="shopItem in cartList" :key="shopItem.id">
    <view class="cart-item br-20 p-t-20 p-l-20 m-b-20 fs-26 c-3" v-if="shopItem.goodsList.length > 0">
      <!-- 店铺名称 -->
      <view class="shop-name flex align-center m-b-20 fs-28 tb">
        <van-checkbox v-model="shopItem.shopIsChecked" @change="() => handleShopCheckChange(shopItem)" icon-size="30rpx"
                      checked-color="#1a1617"/>
        <view class="m-l-15 m-r-5">{{ shopItem.shopName }}</view>
        <van-icon name="arrow" color="#333"/>
      </view>

      <!-- 商品信息 -->
      <van-swipe-cell right-width="65" stop-propagation v-for="(goodsItem, index) in shopItem.goodsList"
                      :key="goodsItem.id">
        <view class="flex m-r-20" :class="{ 'm-b-30': goodsItem.length - 1 !== index }">
          <!-- 复选框 -->
          <view class="flex-center m-r-15">
            <van-checkbox v-model="goodsItem.goodsIsChecked" @change="() => handleGoodsCheckChange(shopItem)"
                          icon-size="30rpx" checked-color="#1a1617"/>
          </view>
          <view class="left br-20 m-r-20">
            <image class="full-image br-20" :src="goodsItem.image" mode="aspectFill"></image>
          </view>
          <view class="right">
            <!-- 商品名称 -->
            <view class="goods-name m-t-5 m-b-20 van-ellipsis">
              {{ goodsItem.name }}
            </view>
            <!-- 商品规格 -->
            <view class="specifications m-b-20 fs-22 p-10 br-10 ellipsis">
              {{ goodsItem.specificationsText }}
            </view>
            <!-- 商品价格 & 数量 -->
            <view class="price-and-number flex-between">
              <view class="price-box">
                <CustomAmount :price="goodsItem.currentPrice" :original-price="goodsItem.originalPrice"></CustomAmount>
              </view>
              <!-- 选择数量 -->
              <view class="number-box c-9 fs-24" style="--van-stepper-background: #F7F8FA">
                <van-stepper v-model="goodsItem.num" integer button-size="40rpx" input-width="50rpx"></van-stepper>
              </view>
            </view>
          </view>
        </view>

        <template #right>
          <view @click="deleteGoodsEmit('handleDeleteGoods', shopItem, goodsItem)"
                class="swipe-cell-delete primary-bgc c-f flex-center h-100">
            删除
          </view>
        </template>
      </van-swipe-cell>
    </view>
  </view>
</template>

<style scoped lang="scss">
.cart-item {
  background-color: #fff;

  .left {
    min-width: 180rpx;
    min-height: 180rpx;
  }

  .right {
    width: 425rpx;

    .specifications {
      max-width: calc(100% - 20rpx); // 添加最大宽度限制
      width: fit-content; // 使宽度适应内容
      background-color: #F7F8FA;
    }
  }

  .swipe-cell-delete {
    width: 130rpx;
  }
}
</style>